<template>
  <div class="wallet">钱包 {{ (cost + profit).toFixed(2) }}</div>
  <a-modal v-model:visible="visible" width="50%" top="50" :align-center="false">
    <template #title> 我的钱包 【利润余额】 {{ profit.toFixed(2) }} 【成本余额】 {{ cost.toFixed(2) }} </template>
    <wallet-account v-if="cnyProfitWallet.accountId" ref="profitAccount" :depositable="false" :transferable="false"></wallet-account>
    <div v-else class="no-wallet">您暂时未开通利润账户</div>
    <div class="wallet-split-line"></div>
    <wallet-account v-if="cnyCostWallet.accountId" ref="costAccount" :depositable="false" :transferable="false"></wallet-account>
    <div v-else class="no-wallet">您暂时未开通成本账户</div>
    <template #footer>
      <a-button type="text" @click="visible = false">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import WalletAccount from './WalletAccount.vue'
  import { myaccounts, walletFind, walletDeposit, managerFindAccountItem, managerTransfer, managerFindWithdrawItem, managerWithdraw, managerFindAccount } from '@/api/finance/wallet'
  let cost: any = ref(0)
  let profit: any = ref(0)
  let visible: any = ref(false)
  let cnyCostWallet: any = ref({})
  let cnyProfitWallet: any = ref({})
  let profitAccount: any = ref()
  let costAccount: any = ref()
  const onLoadMyaccounts = async () => {
    let rs = await myaccounts({})
    cost.value = rs?.data?.cnyCost?.availabeBalance || 0
    profit.value = rs?.data?.cnyProfit?.availabeBalance || 0
    cnyCostWallet.value = rs?.data?.cnyCost || {}
    cnyProfitWallet.value = rs?.data?.cnyProfit || {}
  }
  onMounted(async () => {
    await onLoadMyaccounts()
  })

  const open = async () => {
    visible.value = true
    if (cnyCostWallet.value.accountId) {
      costAccount.value.load(cnyCostWallet.value.accountId)
    }
    if (cnyProfitWallet.value.accountId) {
      profitAccount.value.load(cnyProfitWallet.value.accountId)
    }
  }

  defineExpose({ open })
</script>

<style lang="less" scoped>
  .wallet {
    font-size: 14px;
  }
  .wallet-split-line {
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgb(206, 204, 204);
  }
  .no-wallet {
    text-align: center;
  }
</style>
